Motion >> Repos - motion-next.git/blob

   1 <md-dialog class="cm-contact-dialog" aria-label="New Contact">
   2   <form name="contactForm" class="md-inline-form" novalidate>
   3     <md-toolbar class="md-accent md-hue-2">
   4       <div
   5         class="md-toolbar-tools"
   6         layout="row"
   7         layout-align="space-between center"
   8       >
   9         <span class="title">{{ vm.title | translate }}</span>
  10         <md-button class="md-icon-button" ng-click="vm.closeDialog()">
  11           <md-icon
  12             md-font-icon="icon-close"
  13             aria-label="Close dialog"
  14           ></md-icon>
  15         </md-button>
  16       </div>
  17     </md-toolbar>
  18
  19     <md-dialog-content ms-scroll>
  20       <div class="error-list">
  21         <div
  22           ng-repeat="error in vm.errors"
  23           class="error"
  24           layout="row"
  25           layout-align="space-between center"
  26         >
  27           <div>
  28             <span class="message">{{error.message}}</span>
  29             <span class="type">({{error.type}})</span>
  30           </div>
  31           <md-button class="md-icon-button">
  32             <md-icon
  33               md-font-icon="icon-alert-box"
  34               aria-label="alert error"
  35               class="s16"
  36             ></md-icon>
  37           </md-button>
  38         </div>
  39       </div>
  40
  41       <md-input-container class="md-block">
  42         <label translate="CONTACTMANAGER.FIRSTNAME">First name</label>
  43         <input
  44           name="firstName"
  45           ng-model="vm.contact.firstName"
  46           required
  47           md-autofocus
  48         />
  49
  50         <div
  51           ng-messages="contactForm.firstName.$error"
  52           ng-show="contactForm.firstName.$touched"
  53           role="alert"
  54         >
  55           <div ng-message="required">
  56             <span translate="CONTACTMANAGER.ERRORS.FIRSTNAME_REQUIRED"
  57               >First name field is required</span
  58             >
  59           </div>
  60         </div>
  61       </md-input-container>
  62
  63       <md-input-container class="md-block">
  64         <label translate="CONTACTMANAGER.LASTNAME">Last name</label>
  65         <input name="lastName" ng-model="vm.contact.lastName" />
  66       </md-input-container>
  67
  68       <md-input-container class="md-block">
  69         <label translate="CONTACTMANAGER.PHONE">Phone</label>
  70         <input name="phone" ng-model="vm.contact.phone" />
  71       </md-input-container>
  72
  73       <md-input-container class="md-block">
  74         <label translate="CONTACTMANAGER.EMAIL">Email</label>
  75         <input name="email" type="email" ng-model="vm.contact.email" />
  76       </md-input-container>
  77
  78       <md-input-container class="md-block">
  79         <label translate="CONTACTMANAGER.MOBILE">Mobile</label>
  80         <input name="mobile" ng-model="vm.contact.mobile" />
  81       </md-input-container>
  82
  83       <md-input-container class="md-block">
  84         <label translate="CONTACTMANAGER.FAX">Fax</label>
  85         <input name="fax" ng-model="vm.contact.fax" />
  86       </md-input-container>
  87
  88       <md-input-container class="md-block">
  89         <label translate="CONTACTMANAGER.LIST">List</label>
  90         <md-select
  91           name="list"
  92           ng-model="vm.contact.ListId"
  93           ng-disabled="vm.contact.id && vm.contact.ListId"
  94           ng-init="vm.getCustomFields(vm.contact.ListId)"
  95           ng-change="vm.getCustomFields(vm.contact.ListId)"
  96           required
  97         >
  98           <md-optgroup label="Lists">
  99             <md-option ng-value="list.id" ng-repeat="list in vm.lists.rows"
 100               >{{list.name}}</md-option
 101             >
 102             <md-option ng-value="null"
 103               ><em translate="CONTACTMANAGER.NONE">None</em></md-option
 104             >
 105           </md-optgroup>
 106         </md-select>
 107
 108         <div
 109           ng-messages="contactForm.list.$error"
 110           ng-show="contactForm.list.$touched"
 111           role="alert"
 112         >
 113           <div ng-message="required">
 114             <span translate="CONTACTMANAGER.ERRORS.LIST_REQUIRED"
 115               >List field is required</span
 116             >
 117           </div>
 118         </div>
 119       </md-input-container>
 120
 121       <div
 122         ng-repeat="customField in vm.customFields.rows"
 123         class="md-block"
 124         ng-switch="customField.type"
 125       >
 126         <div ng-switch-when="datetime">
 127           <label>{{customField.alias}}</label>
 128
 129           <div
 130             ng-init="vm.contact['cf_' + customField.id] = vm.getDateFromString(vm.contact['cf_' + customField.id])"
 131           >
 132             <mdp-date-picker
 133               mdp-open-on-click
 134               ng-required="customField.required"
 135               mdp-format="YYYY-MM-DD"
 136               ng-model="vm.contact['cf_' + customField.id]"
 137             ></mdp-date-picker>
 138             <mdp-time-picker
 139               mdp-open-on-click
 140               mdp-placeholder="Time"
 141               ng-required="customField.required"
 142               mdp-format="HH:mm:ss"
 143               mdp-auto-switch="true"
 144               ng-model="vm.contact['cf_' + customField.id]"
 145             ></mdp-time-picker>
 146           </div>
 147         </div>
 148
 149         <div ng-switch-when="select">
 150           <label>{{customField.alias}}</label>
 151
 152           <md-select
 153             ng-model="vm.contact['cf_' + customField.id]"
 154             ng-required="customField.required"
 155           >
 156             <md-option
 157               ng-repeat="value in customField.values"
 158               ng-value="value.value"
 159               >{{value.value}}</md-option
 160             >
 161             <md-option ng-value="null"
 162               ><em translate="CONTACTMANAGER.NONE">None</em></md-option
 163             >
 164           </md-select>
 165         </div>
 166
 167         <div ng-switch-when="switch">
 168           <md-switch
 169             aria-label="{{customField.alias}}"
 170             ng-model="vm.contact['cf_' + customField.id]"
 171             ng-true-value="1"
 172             ng-false-value="0"
 173           >
 174             {{customField.alias}}
 175           </md-switch>
 176         </div>
 177
 178         <md-input-container ng-switch-default>
 179           <label>{{customField.alias}}</label>
 180
 181           <input
 182             type="{{customField.type}}"
 183             ng-model="vm.contact['cf_' + customField.id]"
 184             ng-required="customField.required"
 185           />
 186         </md-input-container>
 187       </div>
 188
 189       <md-input-container class="md-block">
 190         <label translate="CONTACTMANAGER.COMPANY">Company</label>
 191         <md-select name="company" ng-model="vm.contact.CompanyId">
 192           <md-option
 193             ng-value="company.id"
 194             ng-repeat="company in vm.companies.rows"
 195             ng-hide="!vm.contact.CompanyId && company.canSelect === false"
 196             ng-disabled="company.canSelect === false"
 197             >{{company.name}}</md-option
 198           >
 199         </md-select>
 200       </md-input-container>
 201
 202       <div ng-if="!vm.allFields" layout="row" layout-align="center center">
 203         <md-button
 204           class="md-accent"
 205           ng-click="vm.allFields = true"
 206           translate="CONTACTMANAGER.SHOW_ALL_FIELDS"
 207           >Show All Fields</md-button
 208         >
 209       </div>
 210
 211       <md-input-container
 212         class="md-block"
 213         ng-if="vm.allFields"
 214         flex-gt-sm=""
 215         ng-init="vm.contact.dateOfBirth = vm.getDateFromString(vm.contact.dateOfBirth)"
 216       >
 217         <label translate="CONTACTMANAGER.DATE_OF_BIRTH">Date of Birth</label>
 218         <mdp-date-picker
 219           mdp-open-on-click
 220           mdp-format="YYYY-MM-DD"
 221           name="dateOfBirth"
 222           ng-model="vm.contact.dateOfBirth"
 223         ></mdp-date-picker>
 224       </md-input-container>
 225
 226       <md-input-container class="md-block" ng-if="vm.allFields">
 227         <label translate="CONTACTMANAGER.COUNTRY">Country</label>
 228         <input type="text" name="country" ng-model="vm.contact.country" />
 229       </md-input-container>
 230
 231       <md-input-container class="md-block" ng-if="vm.allFields">
 232         <label translate="CONTACTMANAGER.CITY">City</label>
 233         <input type="text" name="city" ng-model="vm.contact.city" />
 234       </md-input-container>
 235
 236       <md-input-container class="md-block" ng-if="vm.allFields">
 237         <label translate="CONTACTMANAGER.STREET">Street</label>
 238         <input type="text" name="street" ng-model="vm.contact.street" />
 239       </md-input-container>
 240
 241       <md-input-container class="md-block" ng-if="vm.allFields">
 242         <label translate="CONTACTMANAGER.POSTAL_CODE">Postal Code</label>
 243         <input type="text" name="postalCode" ng-model="vm.contact.postalCode" />
 244       </md-input-container>
 245
 246       <md-input-container class="md-block" ng-if="vm.allFields">
 247         <label translate="CONTACTMANAGER.NOTES">Notes</label>
 248         <input
 249           type="text"
 250           name="description"
 251           ng-model="vm.contact.description"
 252         />
 253       </md-input-container>
 254
 255       <div ng-if="vm.allFields" layout="row" layout-align="center center">
 256         <md-button
 257           class="md-accent"
 258           ng-click="vm.allFields = false"
 259           translate="CONTACTMANAGER.FEWER_FIELDS"
 260           >Fewer Fields</md-button
 261         >
 262       </div>
 263
 264       <div class="error-list">
 265         <div
 266           ng-repeat="error in vm.errors"
 267           class="error"
 268           layout="row"
 269           layout-align="space-between center"
 270         >
 271           <div>
 272             <span class="message">{{error.message}}</span>
 273             <span class="type">({{error.type}})</span>
 274           </div>
 275           <md-button class="md-icon-button">
 276             <md-icon
 277               md-font-icon="icon-alert-box"
 278               aria-label="alert error"
 279               class="s16"
 280             ></md-icon>
 281           </md-button>
 282         </div>
 283       </div>
 284     </md-dialog-content>
 285
 286     <md-dialog-actions layout="row" layout-align="space-between center">
 287       <div
 288         layout="row"
 289         layout-align="start center"
 290         ng-if="vm.crudPermissions.canEdit"
 291       >
 292         <md-button
 293           type="submit"
 294           ng-if="!vm.newContact"
 295           ng-click="vm.saveContact()"
 296           class="send-button md-accent md-raised"
 297           ng-disabled="contactForm.$invalid || contactForm.$pristine"
 298           aria-label="SAVE"
 299           translate="CONTACTMANAGER.SAVE"
 300           translate-attr-aria-label="CONTACTMANAGER.SAVE"
 301         >
 302           SAVE
 303         </md-button>
 304
 305         <md-button
 306           type="submit"
 307           ng-if="vm.newContact"
 308           ng-click="vm.addNewContact()"
 309           class="send-button md-accent md-raised"
 310           ng-disabled="contactForm.$invalid || contactForm.$pristine"
 311           aria-label="ADD"
 312           translate="CONTACTMANAGER.ADD_CONTACT"
 313           translate-attr-aria-label="CONTACTMANAGER.ADD_CONTACT"
 314         >
 315           ADD CONTACT
 316         </md-button>
 317       </div>
 318       <div layout="row">
 319         <md-button
 320           class="md-icon-button"
 321           ng-if="vm.crudPermissions.canDelete && !vm.newContact"
 322           ng-click="vm.deleteContact($event)"
 323           aria-label="DELETE"
 324           translate
 325           translate-attr-aria-label="CONTACTMANAGER.DELETE"
 326         >
 327           <md-icon md-font-icon="icon-delete"></md-icon>
 328           <md-tooltip
 329             ><span translate="CONTACTMANAGER.DELETE">DELETE</span></md-tooltip
 330           >
 331         </md-button>
 332       </div>
 333     </md-dialog-actions>
 334   </form>
 335 </md-dialog>